import React ,{useEffect, useState,Key} from 'react'
import { Tree,Card,Row,Col,Tag,Pagination,Table,Button } from 'antd'
import { useNavigate, useParams } from 'react-router-dom';
//引入请求
import{getHosDepartmentRequest,getDepartmentScheduleTimeRequest,findScheduleListRequest}from '@api/hospital/hospitalList'
//引入类型
import {hospitalDepartmentType,bookingScheduleListType,findScheduleListReturnType} from '@api/hospital/model/hospitalListType'

export default function HospitalSchedule() {
  const navigate =useNavigate()
   const {hoscode}=useParams()
   //因为请求回来的数据的key与treedata中的属性名不一致，所以没办法一一对应展示数据
   //解决方法：定义一个treedata状态，在初始化时，把得到的数据设置到state中，在tree组件上添加一个属性filednames，指定tree用自定义节点字段，设置时字段要加引号
   //又因为ant-design中给treedata的类型已经有限制，所以需要把自定义treedata赋值给treedata属性时加一个断言as[]
   const [treeData,setTreeData]=useState<hospitalDepartmentType>([])
   //定义排班时间的数据
   const[scheduleTime,setScheduleTime]=useState<bookingScheduleListType>([])
   //定义当前页码
   const[page,setPage]=useState(1)
   //定义一页几条
   const[limit,setLimit]=useState(3)
   //定义总条数
   const[total,setTotal]=useState(0)
   //定义当前选中的科室
  const [depCode, setDepCode] = useState("200040878");
  //定义排班时间
  const[workDate,setWorkDate]=useState('2022-04-28')
  //定义表格数据
  const[tableData,setTableData]=useState<findScheduleListReturnType>([])
  //1.组件初始加载的时候发送科室列表请求
  useEffect(()=>{
    const departmentRequest =async()=>{
       const result = await getHosDepartmentRequest(hoscode as string)
       setTreeData(result)
    }
    departmentRequest()
  },[])
   //2.组件初始加载的时候发送科室排班请求  
useEffect(()=>{
  const scheduleTimeRequset= async()=>{
    const result =  await getDepartmentScheduleTimeRequest({
      page,
      limit,
      hoscode:hoscode as string,
      depcode:depCode
    })
    setTotal(result.total)
    setScheduleTime(result.bookingScheduleList)
    setWorkDate(result.bookingScheduleList[0].workDate )
  }
  scheduleTimeRequset()
},[page,limit,depCode])
 //3.组件初始化的时候根据科室和时间发送详细信息请求,渲染表格
useEffect(()=>{
  const findScheduleList =async()=>{
    const result =await  findScheduleListRequest({
      hoscode:(hoscode as string),
      depcode:depCode,
      workDate:workDate
    })
    setTableData(result)
  }
  findScheduleList()
},[workDate,depCode])


      const columns = [
    
        {
          title: '序号',
          width: 60,
          dataIndex: 'index',
          render(_: any, __: any, index: number) {
            return index + 1
          }
        },
        //如果没有dataIndex设置,则render中拿到的数据就是当前完整的数据
          /* render(_: any, data: any,index:number(第三个参数是下标)) {
            return (
              <img width={100} src={`data:image/jpeg;base64,${data.logoData}`} alt="" />
            )
          } */
    
          //如果设置了dataIndex,则render拿到的dataIndex对应的数据
        {
          title: '职称',
          dataIndex: 'title'
        },
        {
          title: '号源时间',
          dataIndex: 'workDate',
        },
        {
          title: '可预约数',
          dataIndex: 'availableNumber',
        },
        {
          title: '剩余预约数',
          dataIndex: 'reservedNumber',
        },
        {
          title: '挂号费（元）',
          dataIndex: 'amount',
          
        },
        {
          title: '擅长技能',
          dataIndex: 'skill',
        }
      ]

//样式
const treeStyle ={
    border:'1px solid #999',
    height:'480px',
    overflow:'auto'
}

//定义改变页码切换数据的函数
const changePageHandle =(page:number,limit:number)=>{
  setPage(page)
  setLimit(limit)
}
//点击树形结构的回调
const changeTreeHandle =(depcode:Key[])=>{
  setDepCode(depcode[0] as string)
}
//点击排班日期的回调
//点击时把遍历生成的排班日期中的workDate传入
const changeScheduleHandle =(workDate:string)=>{
    return()=>{
      setWorkDate(workDate)
    }
}
  return (
    <div>
        <Card>
            <p>选择：北京协和医院/多发性硬化专科门诊/2022-07-22</p>
            <Row gutter={10}>
                <Col span={5}>
                    <Tree 
                    treeData={treeData as []} 
                    style={treeStyle} 
                    fieldNames={{title:'depname',key:'depcode'}}
                    //设置树形结构的哪一项默认展开，值为一个数组，数组里是key值
                    //因为使用的是自己的treedata，所以在刚解析页面时是先渲染组件的，此时还没有数据，所以不能使用ant-design中的defaultExpandedKeys，要把default去掉
                    expandedKeys={["a4e171f4cf9b6816acdfb9ae62c414d7"]  }  
                    onSelect={changeTreeHandle}
                    />
                </Col>
                <Col span={19}>
                  {
                    scheduleTime.map((item)=>{
                        return(<Tag key={item.workDate} 
                          onClick={changeScheduleHandle(item.workDate)} 
                          // 给tag标签添加 移入时，鼠标光标为小手样式
                          style={{ cursor: "pointer" }}>{item.workDate}<br/>{item.availableNumber}/{item.reservedNumber}</Tag>)
                    })

                }
                  
                  <Pagination  
                  total={total} 
                  style={{marginTop:'10px'}} 
                  current={page} 
                  pageSize={limit} 
                  onChange={changePageHandle} 
                  pageSizeOptions={[3,5,8]}
                  showSizeChanger={true}
                  />
                  <Table
                  style={{ marginTop: "30px" }}
                  columns={columns}
                  dataSource={tableData}
          
                  bordered
                  //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
                  rowKey="id"  
                  pagination={false}
                  
                  />
                  <Button style={{marginTop:'10px'}} onClick={()=>{navigate('/syt/hosipital/hosipitalList')}}>
                    返回
                  </Button>
                </Col>
                
            </Row>
           
            

        </Card>

    </div>
  )
}
